<template>
  <div class="app-container">

    <div style="padding: 5px;" />
    <el-table :data="list" border row-key="id" align="left">
      <el-table-column label="编号" align="center" width="100px">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column label="名称" align="center" width="100px">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
<!--      <el-table-column label="配置说明" align="left" width="400px">
        <template slot-scope="scope">
          <div style="color: indianred;" v-for="(item,index) in scope.row.desc" :key="index">第{{index+1}}步-{{item.desc}}-{{item.isSet}}</div>
        </template>
      </el-table-column> -->
      <el-table-column label="审核流程 [步骤:控制方式-页面显示角色-人员]">
        <template slot-scope="scope">

          <div v-for="(item,step) in scope.row.auditStep" :key="step">
            <!-- {{item}} -->
            第{{ step+1 }}步:
            <span>{{item.sta==0?"【固定流程】":"【页面流程】"}}-</span>
            <span>{{item.name==null?'【未填】':item.name}}</span>
            <span v-if="item.typ=='zhijie'">-直接领导</span>
            <span v-if="item.typ=='fenguan'">-分管领导</span>
            <span v-if="item.typ=='zhuyao'">-主要领导</span>
            <span v-if="item.typ=='zhiding'">-{{item.uname}}</span>
            <span v-if="item.typ=='feizhiding'">-页面选择产生</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="承办流程 [步骤:控制方式-页面显示角色-人员-推送方式]">
        <template slot-scope="scope">
          <div v-for="(item,step) in scope.row.chengbanStep" :key="step">
            <!-- {{item}} -->
            第{{ step+1 }}步:
            <span>{{item.sta==0?"【固定流程】":"【页面流程】"}}-</span>
            <span>{{item.name==null?'【未填】':item.name}}</span>
            <span v-if="item.typ=='zhijie'">-直接领导</span>
            <span v-if="item.typ=='fenguan'">-分管领导</span>
            <span v-if="item.typ=='zhuyao'">-主要领导</span>
            <span v-if="item.typ=='zhiding'">-{{item.uname}}</span>
            <span v-if="item.typ=='feizhiding'">-页面选择产生</span>
            <span>-{{item.task==1?'发布任务':'发布通知'}}</span>

          </div>

        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" plain @click="showAuditDialog(scope.$index)">设置审核人</el-button>
          <el-button type="warning" size="mini" plain @click="showChengbanDialog(scope.$index)">设置承办人</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="审核人" :visible.sync="shenheDialog.visible" width="90%" :close-on-click-modal="false" top="5vh">
      <div>
        <el-form ref="form" label-position="right" label-width="100px">
          <div v-for="(item, idx) in shenheDialog.auditStep" :key="idx">
            <el-row>
              <el-col :span="1">
              <el-form-item :label="'步骤' + (idx + 1)">

              </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="流程名称">
                  <el-input v-model="item.name" :options="userList" style="width: 100%;" />
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="是否固定">
                  <el-select v-model="item.sta" placeholder="请选择" style="width: 100%;">
                    <el-option label="固定流程" value="0" />
                    <el-option label="页面控制" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item label="数据类型">
                  <el-select v-model="item.typ" placeholder="请选择" style="width: 100%;">
                    <el-option label="直接上级" value="zhijie" />
                    <el-option label="分管领导" value="fenguan" />
                    <el-option label="主要领导" value="zhuyao" />
                    <el-option label="指定人员" value="zhiding" />
                    <el-option label="非指定人员" value="feizhiding" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item v-if="item.typ == 'zhiding'" label="人员">
                  <el-select v-model="item.val" placeholder="请选择">
                    <el-option v-for="(item, idx) in users" :key="idx" :label="item.name" :value="item.uid"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="3">
                <el-button type="danger" size="mini" @click="rmAuditStep(idx)">删除</el-button>
              </el-col>

            </el-row>
          </div>
        </el-form>
      </div>
      <el-button @click="addAuditStep" type="warning">添加审核步骤</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shenheDialog.visible = false">关 闭</el-button>
        <el-button type="primary" @click="saveAuditStep()">提 交</el-button>
      </span>
    </el-dialog>

    <el-dialog title="承办人" :visible.sync="chengbanDialog.visible" width="90%" :close-on-click-modal="false" top="5vh">
      <div>
        <el-form ref="form" label-width="100px" label-position="right">
          <div v-for="(item, idx) in chengbanDialog.chengbanStep" :key="idx">
            <el-row>
              <el-col :span="2">
                <el-form-item :label="'步骤' + (idx + 1)" >
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="流程名称">
                  <el-input v-model="item.name" :options="userList" style="width: 100%;" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="是否固定">
                  <el-select v-model="item.sta" placeholder="请选择" style="width: 100%;">
                    <el-option label="固定流程" value="0" />
                    <el-option label="页面控制" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="类型">
                  <el-select v-model="item.typ" placeholder="请选择" style="width: 100%;">
                    <el-option label="直接上级" value="zhijie" />
                    <el-option label="分管领导" value="fenguan" />
                    <el-option label="主要领导" value="zhuyao" />
                    <el-option label="指定人员" value="zhiding" />
                    <el-option label="非指定人员" value="feizhiding" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="推送方式">
                  <el-select v-model="item.task" placeholder="请选择" style="width: 100%;">
                    <el-option label="通知" value="0" />
                    <el-option label="任务" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item v-if="item.typ == 'zhiding'" label="人员">
                  <el-select v-model="item.val" placeholder="请选择">
                    <el-option v-for="(item, idx) in users" :key="idx" :label="item.name" :value="item.uid"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="1">
                <el-button type="danger" size="mini" @click="rmChengbanStep(idx)">删除</el-button>
              </el-col>

            </el-row>
          </div>
        </el-form>
      </div>
      <el-button @click="addChengbanStep" type="warning">添加承办步骤</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chengbanDialog.visible = false">关 闭</el-button>
        <el-button type="primary" @click="saveChengbanStep()">提 交</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>

import { websock } from '@/websock'

export default {
  data() {
    return {
      list: null,
      userList: [],
      users: [],
      shenheDialog: {
        visible: false,
        id: 0,
        auditStep: []
      },
      chengbanDialog: {
        visible: false,
        id: 0,
        chengbanStep: []
      }
    }
  },
  async created() {
    this.fetchData()

    const res = await websock.getContactList()
    console.log('created', res)
    const userList = []
    for (let i = 0; i !== res.length; i++) {
      userList.push({
        value: i + '',
        label: res[i].name,
        children: []
      })
      for (let j = 0; j !== res[i].userList.length; j++) {
        userList[i].children.push({
          label: res[i].userList[j].name,
          value: JSON.stringify({uid: res[i].userList[j].uid, name: res[i].userList[j].name})
        })
      }
    }
    this.userList = userList

    websock.getAllUsers().then(res => {
      this.users = res
    })
  },
  methods: {
    // 获取数据
    fetchData() {
      websock.getEventConfig().then(data => {
        console.log(data)
        this.list = data
      })
    },

    getUname(uid) {
      for (let i = 0; i != this.users.length; i++) {
        if (this.users[i].uid == uid) return this.users[i].name
      }

      return ''
    },

    showAuditDialog(idx) {
      console.log('click audit', this.list[idx])
      this.shenheDialog.visible = true
      this.shenheDialog.id = this.list[idx].id
      this.shenheDialog.auditStep = (this.list[idx].auditStep || []).slice()
    },
    showChengbanDialog(idx) {
      console.log('click chengban', this.list[idx])
      this.chengbanDialog.visible = true
      this.chengbanDialog.id = this.list[idx].id
      this.chengbanDialog.chengbanStep = (this.list[idx].chengbanStep || []).slice()
    },
    addAuditStep() {
      this.shenheDialog.auditStep.push(
        {
          typ: 'zhijie',
          val: '',
          name: '',
          sta: '0'
        }
      )
      console.log(this.shenheDialog)
    },
    rmAuditStep(idx) {
      this.shenheDialog.auditStep.splice(idx, 1)
    },
    addChengbanStep() {
      this.chengbanDialog.chengbanStep.push(
        {
          typ: 'zhijie',
          val: '',
          name: '',
          sta: '0',
          task: '0'
        }
      )
      console.log(this.chengbanDialog)
    },
    rmChengbanStep(idx) {
      this.chengbanDialog.chengbanStep.splice(idx, 1)
    },
    async saveAuditStep() {
      // if (this.shenheDialog.auditStep.length == 0) return this.$message.error('请添加审核步骤')
      const steps = []
      for (let i = 0; i != this.shenheDialog.auditStep.length; i++) {
        if (this.shenheDialog.auditStep[i].typ == 'zhiding' && this.shenheDialog.auditStep[i].val == '') {
          return this.$message.error('请选择人员')
        }
        if (this.shenheDialog.auditStep[i].typ == 'zhiding') {
          steps.push({
            typ: 'zhiding',
            val: this.shenheDialog.auditStep[i].val,
            uname: this.getUname(this.shenheDialog.auditStep[i].val),
            name: this.shenheDialog.auditStep[i].name,
            sta: this.shenheDialog.auditStep[i].sta
          })
        } else {
          steps.push({
            typ: this.shenheDialog.auditStep[i].typ,
            name: this.shenheDialog.auditStep[i].name,
            sta: this.shenheDialog.auditStep[i].sta
          })
        }
      }
      try {
        await websock.saveAuditStep({
          id: this.shenheDialog.id,
          steps
        })
        this.shenheDialog.visible = false
        this.fetchData()
      } catch (err) {
        console.error(err)
        this.$message.error(err.message || 'error')
      }
    },
    async saveChengbanStep() {
      // if (this.chengbanDialog.chengbanStep.length == 0) return this.$message.error('请添加审核步骤')
      const steps = []
      for (let i = 0; i != this.chengbanDialog.chengbanStep.length; i++) {
        if (this.chengbanDialog.chengbanStep[i].typ == 'zhiding' && this.chengbanDialog.chengbanStep[i].val == '') {
          return this.$message.error('请选择人员')
        }
        if (this.chengbanDialog.chengbanStep[i].typ == 'zhiding') {
          steps.push({
            typ: 'zhiding',
            val: this.chengbanDialog.chengbanStep[i].val,
            uname: this.getUname(this.chengbanDialog.chengbanStep[i].val),
            task: this.chengbanDialog.chengbanStep[i].task,
            name: this.chengbanDialog.chengbanStep[i].name,
            sta: this.chengbanDialog.chengbanStep[i].sta
          })
        } else {
          steps.push({
            typ: this.chengbanDialog.chengbanStep[i].typ,
            task: this.chengbanDialog.chengbanStep[i].task,
            name: this.chengbanDialog.chengbanStep[i].name,
            sta: this.chengbanDialog.chengbanStep[i].sta
          })
        }
      }
      try {
        await websock.saveChengbanStep({
          id: this.chengbanDialog.id,
          steps
        })
        this.chengbanDialog.visible = false
        this.fetchData()
      } catch (err) {
        console.error(err)
        this.$message.error(err.message || 'error')
      }
    }

  }
}
</script>
